<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>运行评价系统-表单配置</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <div th:include="base-libs :: base-libs"/>
    <style type="text/css">
        table.from_table {
            border-spacing: 1px;
            border-collapse: inherit;
            background-color: #c0c0c0;
            width: 100%;
        }

        td {
            background-color: #fff;
            line-height: 40px;
            padding: 5px 10px;
        }

    </style>
    <script type="text/javascript">

        $(function () {
            var formId = $.QuickUrlUtils.getRequest("formId");
            if (!StringUtils.isEmpty(formId)) {
                $.QuickRemote.AjaxJson("/tjfx/formPz/queryForm", function (form) {
                    var content = form.content;
                    var formId = form.formId;
                    var metadata = form.metadata;
                    metadata = JSON.parse(metadata);
                    var sql = form.sql;
                    var title = form.title;
                    content = decodeURIComponent(content);
                    sql = decodeURIComponent(sql);
                    $("#title").val(title);
                    $("#sql").val(sql);
                    $("body").attr("formId", formId);
                    $("#formHeightContainer").html(content);
                    for (var id in metadata) {
                        if (id.startsWith("title")) {
                            new Control().title(metadata[id]);
                        } else if (id.startsWith("col")) {
                            new Control().col(metadata[id]);
                        }
                    }
                }, {formId: formId});
            }
            initView();
            initBtn();
        });

        function initView() {
            $("body").on("click", "a[action]", function () {
                var action = $(this).attr("action");
                eval(action + "()");
            });
            $("body").on("click", ".wapper_container", function () {
                if ($(this).hasClass("alert-info")) {
                    return false;
                } else {
                    //处理标记
                    $(".wapper_container.alert-info").removeClass("alert-info");
                    $(this).addClass("alert-info");
                    //处理按钮
                    initBtn();
                    //处理控制面板
                    var id = $(this).attr("id");
                    $("#controlContainer").children().hide();
                    $("#control_" + id).show().trigger("show");
                }
            });
            $("body").on("show", "div.control_container", function () {
                $(this).find("input.target").focus();
            });
            resize();
        }

        function initBtn() {
            var container_type = "all_type";
            var active = $(".wapper_container.alert-info[container_type]");
            if (active.length > 0)
                container_type = $(active).attr("container_type");
            $(".btn_container").find(".btn").hide();
            $(".btn_container").find(".btn." + container_type).show();
            $(".btn_container .btn.all_type").show();
        }

        function resize() {
            var height = $(window).height();
            $("#formHeightContainer").parent().height(height - 96);
            $("#controlHeightContainer").parent().height(height - 165);
            $("#formContainer").width($("#formHeightContainer").width() - 23);
            $("#formHeightContainer").add("#controlHeightContainer").css("height", "100%").css("overflowX", "hidden").css("overflowY", "scroll");
        }

        function addTitle(opt) {
            opt = opt || {};
            var id = "title" + new Date().getTime();
            var title = $("<div class='alert wapper_container'>").attr("id", id).attr("container_type", "title");
            var active = $(".wapper_container.alert-info[container_type=title]");
            if (active.length > 0)
                active.after(title);
            else
                $("#formContainer").find("div.header").append(title);
            new Control().title($.extend({
                id: id,
                text: "请输入标题"
            }, opt));
        }

        function addRow() {
            var active = $(".wapper_container.alert-info[container_type=col]");
            var row = $("<tr class='row_container'>");
            if (active.length > 0)
                active.parent().after(row);
            else
                $("#formContainer").find("table.from_table").append(row);
            addCol(row);
        }

        function addCol(row) {
            var id = "col" + new Date().getTime();
            var colContainer = $("<td>").addClass("wapper_container col_container").attr("container_type", "col");
            var active = $(".wapper_container.alert-info[container_type=col]");
            var col = $("<p>");
            colContainer.attr("id", id).append(col);
            if (row && row.length > 0)
                row.append(colContainer);
            else
                active.after(colContainer);
            colContainer.attr("col", "col-sm-1");


            var settingHandler = {"label": "value", "value": "label"};
            var type = settingHandler[$("#" + id).prev("td").eq(0).attr("col_type")] || "label";
            var text = type == "label" ? "请输入标题" : "请输入字段名";
            new Control().col({
                id: id,
                type: type,
                text: text
            });
        }

        function delTitle() {
            var active = $(".wapper_container.alert-info[container_type=title]");
            var id = active.attr("id");
            active.remove();
            $("#control_" + id).remove();
            initBtn();
        }

        function delCol() {
            var active = $(".wapper_container.alert-info[container_type=col]");
            var id = active.attr("id");
            if (active.siblings().length < 1)
                active.parent().remove();
            active.remove();
            $("#control_" + id).remove();
            initBtn();
        }

        function Control() {
            this.col = function (option) {
                var id = option.id;
                var opt = $.extend({}, {
                    align: "center"
                    , colspan: "1"
                    , type: "label"
                    , weight: "normal"
                }, option);
                var setting = new Setting();
                var controlId = "control_" + id;
                var control = $($("#HTML_col").html()).attr("id", controlId);
                $("#controlContainer").append(control);
                control.on("keyup change", "input, select", function () {
                    var name = $(this).attr("name");
                    opt[name] = $(this).val();
                    setting.col(opt);
                });
                control.find("input[name],select[name]").each(function () {
                    var name = $(this).attr("name");
                    $(this).val(opt[name]);
                });
                $("#" + id).trigger("click");
                setting.col(opt);
            }
            this.title = function (option) {
                var opt = $.extend({}, {
                    align: "center"
                    , size: "18px"
                    , weight: "normal"
                }, option);
                var setting = new Setting();
                var id = opt.id;
                var controlId = "control_" + id;
                var control = $($("#HTML_title").html()).attr("id", controlId);
                $("#controlContainer").append(control);
                control.on("keyup change", "input, select", function () {
                    var name = $(this).attr("name");
                    opt[name] = $(this).val();
                    setting.title(opt);
                });
                control.find("input[name],select[name]").each(function () {
                    var name = $(this).attr("name");
                    $(this).val(opt[name]);
                });
                $("#" + id).trigger("click");
                setting.title(opt);
            }
        }

        function Setting() {
            this.title = function (opt) {
                var id = opt.id;
                var _ = $("#" + id);
                _.html(opt.text);
                _.css("textAlign", opt.align);
                _.css("fontSize", opt.size);
                _.css("lineHeight", opt.size);
                _.css("fontWeight", opt.weight);
                _.data("option", opt);
            }
            this.col = function (opt) {
                var id = opt.id;
                var _ = $("#" + id);
                _.html(opt.text);
                _.css("textAlign", opt.align);
                _.attr("colspan", opt.colspan);
                _.attr("col_type", opt.type);
                _.css("fontWeight", opt.weight);
                _.data("option", opt);
                if (opt.type == "value") _.attr("field", opt.text);
            }
        }

        function save() {
            var html = $("#formHeightContainer").html();
            var params = {};
            var sql = $("#sql").val();
            var url = "/tjfx/formPz/saveForm";

            var metadata = {};
            $(".wapper_container").each(function () {
                var id = $(this).attr("id");
                var data = $(this).data("option");
                metadata[id] = data;
            });
            params["metadata"] = JSON.stringify(metadata);
            params["content"] = encodeURIComponent(html);
            params["sql"] = encodeURIComponent(sql);
            params["formId"] = $("body").attr("formId") || "";
            params["title"] = $("#title").val();
            $.QuickRemote.AjaxJson(url, submitCkmxYpzthandler, {jsonStr: JSON.stringify(params)});
        }

        /**回调*/
        function submitCkmxYpzthandler(result) {
            if (result["state"] === true) {
                $.QuickAlert.alertNormal("提交成功", {
                    callback: function () {
                        $("body").attr("formId", result["info"]["form"])
                    }
                });
            } else {
                $.QuickAlert.alertFail({content: "提交失败"});
            }
        }

    </script>
</head>
<body class="container-fluid">
<div class="row">
    <div class="col-xs-9">
        <div class="panel panel-default">
            <div class="panel-heading">
                表单页面配置
            </div>
            <div class="panel-body">
                <div id="formHeightContainer">
                    <div id="formContainer">
                        <div class="header"></div>
                        <table class="from_table">
                            <colgroup>
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.33%">
                                <col style="width: 8.34%">
                            </colgroup>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="panel panel-default">
            <div class="panel-heading btn_container">
                <a class="btn btn-default all_type" href="javascript:void(0);" role="button" action="addTitle">添加标题</a>
                <a class="btn btn-default all_type" href="javascript:void(0);" role="button" action="addRow">添加行</a>
                <a class="btn btn-default col" href="javascript:void(0);" role="button" action="addCol">添加列</a>
            </div>
            <div class="panel-body">
                <div id="controlHeightContainer">
                    <div id="controlContainer">

                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            SQL配置
                        </div>
                        <div class="panel-body form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <textarea id="sql" class="form-control" placeholder="请输入SQL" name="text"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-sm-10">
                        <input id="title" class="form-control" placeholder="请输入页面标题">
                    </div>
                    <div class="col-sm-2">
                        <a class="btn btn-default" href="javascript:void(0);" role="button" action="save">保存</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="HTML_col">
    <div class="panel panel-info control_container">
        <div class="panel-heading">
            列设置
        </div>
        <div class="panel-body form-horizontal">
            <div class="form-group">
                <div class="col-sm-4"><a class="btn btn-default" href="javascript:void(0);" role="button"
                                         action="delCol">删除</a></div>
                <div class="col-sm-8"><input class="form-control target" placeholder="请输入文本" name="text"></div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">类型</label>
                <div class="col-sm-8">
                    <select class="form-control" name="type">
                        <option value="label">标题</option>
                        <option value="value">内容</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">对齐方式</label>
                <div class="col-sm-8">
                    <select class="form-control" name="align">
                        <option value="left">左对齐</option>
                        <option value="center">居中对齐</option>
                        <option value="right">右对齐</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">字体加粗</label>
                <div class="col-sm-8">
                    <select class="form-control" name="weight">
                        <option value="normal">正常</option>
                        <option value="bold">加粗</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">宽度</label>
                <div class="col-sm-8"><input class="form-control" placeholder="设置列宽度占比，最大12" name="colspan"></div>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="HTML_title">
    <div class="panel panel-info control_container">
        <div class="panel-heading">
            标题设置
        </div>
        <div class="panel-body form-horizontal">
            <div class="form-group">
                <div class="col-sm-4"><a class="btn btn-default" href="javascript:void(0);" role="button"
                                         action="delTitle">删除</a></div>
                <div class="col-sm-8"><input class="form-control target" placeholder="请输入标题文本" name="text"></div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">文本大小</label>
                <div class="col-sm-8">
                    <select class="form-control" name="size">
                        <option value="16px">16</option>
                        <option value="18px">18</option>
                        <option value="20px">20</option>
                        <option value="22px">22</option>
                        <option value="24px">24</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">对齐方式</label>
                <div class="col-sm-8">
                    <select class="form-control" name="align">
                        <option value="left">左对齐</option>
                        <option value="center">居中对齐</option>
                        <option value="right">右对齐</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-4">字体加粗</label>
                <div class="col-sm-8">
                    <select class="form-control" name="weight">
                        <option value="normal">正常</option>
                        <option value="bold">加粗</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</script>
</html>